<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
      integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
      crossorigin=""
    />
    <script
      src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
      integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
      crossorigin=""
    ></script>
    <style>
      #map {
        height: 800px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map = L.map('map').setView([27.249374, 117.624815], 15);
      var marker = L.marker([27.249374, 117.624815]).addTo(map);
      marker.bindPopup('<b>Hello world!</b><br>I am a popup.').openPopup();
      var polyline = L.polyline(
        [
          [27.249374, 117.624815],
          [27.268002, 117.60406]
        ],
        { color: 'red' }
      ).addTo(map);
      var polygon = L.polygon([
        [27.249374, 117.624815],
        [27.255871, 117.62054],
        [27.253658, 117.615733]
      ]).addTo(map);
      polygon.on('click', () => {
        onPolygonClick();
      });
      var circle = L.circle([27.249374, 117.646815], {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5,
        radius: 500
      }).addTo(map);
      circle.bindPopup('I am a circle.');
      function onPolygonClick(e) {
        var popup = L.popup()
          .setLatLng([27.255871, 117.62054])
          .setContent('<h3>我是弹出窗口</h3><div>你好</div>')
          .openOn(map);
      }
    </script>
  </body>
</html>
